{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}
{% load group_filter %}
{% block title %}智慧众包—配置质检{% endblock title %}
{% block header_tail %}
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
    <!-- daterange picker -->
    {#<link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">#}
    <link rel="stylesheet" href="{% static 'bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' %}">
    <!-- bootstrap slider -->
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-slider/slider.css' %}">
{% endblock header_tail %}

{% block section_content %}

    <div>
        <div class="box-header with-border">
            <h3 class="box-title">
                新增配置质检
                <button class="btn btn-primary" data-toggle="modal" data-target="#exportMessage">导出记录</button>
                <a class="btn btn-primary" href="{% url 'configQC:vindiacte_qc' %}">维护质检</a>
            </h3>
        </div>
        <!-- form start -->
        <div class="box box-primary">
            <div class="box-header with-border" style="border-color: #1b6d85">
                <!-- Date range -->
                <form role="form" id="" method="get">
                    {% csrf_token %}
                    <div style="width: 95%; float: left;">
                        {% for field in form %}
                            <div class="input-group select-config-div" style="float: left; ">
                                <label for="" class="control-label">{{ field.label }}：</label>
                                <p>{{ field }}</p>
                            </div>
                        {% endfor %}
                        <div style="float: left;" class="input-group select-config-div">
                            <label for="id" class="control-label">每页显示：</label>
                            <select name="limit" id="showNumSelect" class="config-input">
                                {% for i in limits %}
                                    {% if i == limit %}
                                        <option selected="selected" value="{{ i }}">{{ i }}条</option>
                                    {% else %}
                                        <option value="{{ i }}">{{ i }}条</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="input-group" style="width: 5%; float: left; margin-top: 70px;">
                        <input type="text" class="no-display">
                        <input type="submit" value="检索" class="form-control pull-left btn btn-sm btn-primary">
                    </div>
                    <p style="clear: both"></p>
                    <div class="form-group">
                    </div>
                </form>
            </div>
            <!-- 展示搜索出来的任务 -->
            <div id="main">
                <div class="box-body" v-show="showMain">
                    <div class="group">
                        <table id="task_each_table" border="1" class="table table-bordered table-hover table-striped">
                            <thead>
                            <tr>
                                {% for head in header %}
                                    <th>
                                <span style="float: left">
                                    {{ head }}
                                </span>
                                    </th>
                                {% endfor %}
                                <th>
                                <span style="float: left">
                                    頻道
                                </span>
                                </th>
                                <th>
                                <span style="float: left">
                                    操作
                                </span>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            {% if not configs %}
                                <tr>
                                    <td colspan="18" style="text-align: center;">暂无数据</td>
                                </tr>
                            {% else %}
                                {% for conf in configs %}
                                    <tr id="tr_{{ conf.id }}">
                                        <td class="hd">{{ forloop.counter }}</td>
                                        <td class="hd"><a href="/configQC/get_config_reason?config_ids={{ conf.id }}"
                                                          target="_blank">{{ conf.id }}</a>
                                        </td>

                                        </td>
                                        <td class="hd" title="{{ conf.webname }}">{{ conf.webname }}</td>
                                        <td class="hd" title="{{ conf.url }}">{{ conf.url }}</td>
                                        <td class="hd" title="{{ conf.author }}">{{ conf.author }}</td>
                                        <td class="hd" title="{{ conf.savename }}">{{ conf.savename }}</td>
                                        <td class="hd">{{ conf.savetime | timestamp_format }}</td>
                                        <td class="hd">{{ conf.last_modify_time | timestamp_format:'%Y-%m-%d %H:%M:%S' }}</td>

                                        {% if conf.gid|get_group_name == '异常' %}
                                            <td class="hd" style="color: red">{{ conf.gid | get_group_name }}</td>
                                        {% else %}
                                            <td class="hd">{{ conf.gid | get_group_name }}</td>
                                        {% endif %}

                                        {% if conf.webtype|get_webtype_name == '异常' %}
                                            <td class="hd" style="color: red">{{ conf.webtype | get_webtype_name }}</td>
                                        {% else %}
                                            <td class="hd">{{ conf.webtype | get_webtype_name }}</td>
                                        {% endif %}

                                        {% if conf.tid|get_tid_name == '异常' %}
                                            <td class="hd" style="color: red;">{{ conf.tid | get_tid_name }}</td>
                                        {% else %}
                                            <td class="hd">{{ conf.tid | get_tid_name }}</td>
                                        {% endif %}

                                        {% if conf.language|get_language_name == '异常' %}
                                            <td class="hd"
                                                style="color: red">{{ conf.language | get_language_name }}</td>
                                        {% else %}
                                            <td class="hd">{{ conf.language | get_language_name }}</td>
                                        {% endif %}

                                        {% if conf.country|get_country_name == '异常' %}
                                            <td class="hd" style="color: red">{{ conf.country | get_country_name }}</td>
                                        {% else %}
                                            <td class="hd">{{ conf.country | get_country_name }}</td>
                                        {% endif %}

                                        <td class="hd">{{ conf.status | get_status_name }}</td>
                                        <td class="hd">{{ conf.id | get_parent_class }}</td>
                                        <td class="hd">
                                            <p class="btn-link channels-tr" style="cursor: pointer"
                                               onclick="get_channels('{{ conf.id }}', '{{ conf.webname }}', '{{ conf.savename }}', '{{ conf.author }}')">
                                                查看频道</p>
                                        </td>
                                        <td class="btn-group">
                                            <a class="btn btn-info btn-xs"
                                               href="http://ispider.istarshine.com/config/{{ conf.id }}/change/"
                                               target="_blank">详情
                                            </a>
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% endif %}
                            </tbody>
                        </table>
                        <p class="" id="paginator">
                            <a class="btn btn-default btn-xs" onclick="toPage('home')">首页</a>
                            <a class="btn btn-default btn-xs" onclick="toPage('last')">上一页</a>
                            <a class="btn btn-default btn-xs" onclick="toPage('next')">下一页</a>
                            <input type="text" id="page-judge" style="width: 30px;height:20px; margin-left: 20px"
                                   onkeyup="toPage('judge')">
                            <a class="btn btn-default btn-xs" onclick="toPage('judge')">跳页</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--导出记录-->
    <div class="modal fade" id="exportMessage" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" style="top:40%">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="exportMsgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                    <form style="margin-top: 10px;" role="form" method="get"
                          action="{% url 'configQC:export_record' %}">
                        {% csrf_token %}
                        <div class="form-group">
                            <label>新增质检记录导出:</label>
                            <div class="input-group date">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <input name="testTime_range" type="text" class="form-control pull-right reservation"
                                       autocomplete="off" placeholder="2022/01/02 - 2022/02/01">
                                <input type="hidden" name="dtype" value="0">
                            </div>
                        </div>
                        <input type="submit" class="btn btn-primary" value="确定">
                    </form>
                </div>
                <div class="modal-footer" style="text-align:center;">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--频道-->
    <div class="modal fade" id="channel_list" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" style="overflow: hidden; ">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #307095;font-weight: bold;">
                    <label>频道列表</label>
                </div>
                <div class="modal-body" style="overflow-y: scroll; max-height: 500px;">
                    <input type="hidden" value="[[ cid ]]">
                    <table id="channel_list_table" border="1" class="table table-bordered table-hover table-striped">
                        <tbody>
                        <tr v-if="channel_list == '' ">
                            <td colspan="5" style="text-align: center;">暂无记录</td>
                        </tr>
                        <template v-for="channel in channel_list">
                            <tr id="channel_[[ cid ]]_[[ $index ]]">
                                <td><a style="cursor:pointer"
                                       onclick="toChannelUrl('[[ cid ]]', '[[ channel.channelurl ]]', '[[ channel.channelname ]]', '[[ webname ]]', '[[ savename ]]', '[[ author ]]', '[[ $index ]]')">[[
                                    channel.channelurl ]]</a></td>
                                <td><span>[[ channel.channelname ]]</span></td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" id="no_channel" class="btn btn-default"
                            data-dismiss="modal"
                            onclick="reject('[[ cid ]]', '[[ webname ]]', '[[ author ]]', '[[ savename ]]')">无频道
                    </button>
                    <button type="button" id="btn_close" class="btn btn-default"
                            data-dismiss="modal">确认
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock section_content %}

{% block jquery_js %}
    {#<script src="{% static 'task/vuePublic.js' %}"></script>#}
    {#<script src="{% static 'task/taskProcess.js' %}"></script>#}
    <!-- date-range-picker -->
    {#<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>#}
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script src="{% static 'plugins/daterangepicker/moment.min.js' %}"></script>
    <script src="{% static 'plugins/daterangepicker/daterangepicker.js' %}"></script>
    <!-- Bootstrap slider -->
    <script src="{% static 'plugins/bootstrap-slider/bootstrap-slider.js' %}"></script>
    <script src="{% static 'bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>
    <script src="{% static 'plugins/daterangepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
    <script>
        var ChannelsVue = new Vue({
            el: '#channel_list',
            data: {
                channel_list: [],
                cid: '',
                webname: '',
                savename: '',
                author: ''
            },
            delimiters: ["[[", "]]"]
        });

        function toChannelUrl(cid, channel_url, channel_name, webname, savename, author, inde) {
            $('#channel_' + cid + '_' + inde).css('background', '#00c0ef');
            $.post({
                url: "{% url 'configQC:save_channel_info' %}",
                data: {
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                    cid: cid,
                    channel_url: channel_url,
                    channel_name: channel_name,
                    webname: webname,
                    savename: savename,
                    author: author,
                },
                success: function (resp) {
                    if (resp.message == 'ok') {
                        window.open(channel_url)
                    } else {
                        alert(resp.message)
                    }
                },
                error: function (err) {
                    alert(err)
                }
            })
        }

        // 查看频道
        function get_channels(cid, webname, savename, author) {
            $('#tr_' + cid).css('background', '#00c0ef');
            $.post({
                url: "{% url 'configQC:get_channels' %}",
                data: {
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                    configid: cid
                },
                success: function (resp) {
                    ChannelsVue.channel_list = resp.channel_list;
                    ChannelsVue.cid = cid;
                    ChannelsVue.webname = webname;
                    ChannelsVue.savename = savename;
                    ChannelsVue.author = author;
                    console.log(resp)
                },
                error: function (err) {
                    console.log(err)
                }
            });
            $('#channel_list').modal();
        }

        // 不合格
        function reject(config_id, webname, author, savename) {
            $.ajax(
                {
                    url: "{% url 'configQC:save_err' %}",
                    type: "POST",
                    dataType: "json",
                    data: {
                        'csrfmiddlewaretoken': '{{ csrf_token }}',
                        'config_id': config_id,
                        'cvalue': '无频道',
                        'remark': '',
                        'test_url': '',
                        'webname': webname,
                        'author': author,
                        'savename': savename,
                        'ctime': '',
                        'gtime': '',
                        'savetime': '',
                        'channel_url': '',
                        'channel_name': '',
                        'dtype': '0'
                    },
                    success: function (result) {
                        alert(result.message);
                        window.close();
                    },
                    error: function (xhr, status, p3, p4) {
                        var err = "Error " + " " + status + " " + p3;
                        if (xhr.responseText && xhr.responseText[0] == "{")
                            err = JSON.parse(xhr.responseText).message;
                        alert(err + '不合格状态修改失败！！！请点击重新修改');
                    }
                });
        }

        // 获取当前url参数值
        function GetQueryValue1(queryName) {
            var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            } else {
                return null;
            }
        }

        // 翻页
        function toPage(type) {
            location_url = window.location.href;
            var page_num = GetQueryValue1('page');
            if (!page_num) {
                page_num = 1
            }
            if (type === 'last') {
                if (Number(page_num) > 1) {
                    page_num = Number(page_num) - 1
                } else {
                    page_num = 1
                }
            } else if (type === 'next') {
                page_num = Number(page_num) + 1
            } else if (type === 'judge') {
                page_num = $("#page-judge").val()
            } else if (type === 'home') {
                page_num = 1
            } else {
                alert('参数错误');
                return false;
            }
            var page = 'page=' + page_num;
            if (location_url.indexOf('page') !== -1) {
                window.location.href = location_url.replace(/page=\d+/, page)
            } else {
                if (location_url.indexOf('?') === -1) {
                    window.location.href = location_url + '?' + page
                } else {
                    window.location.href = location_url + '&' + page;
                }
            }
        }

        function changeColor(id, color) {
            $(id).parent().parent().addClass("active");
            $(id).children().css("color", color);
        }

        changeColor("#manage", "#00FF7F");
        /* BOOTSTRAP SLIDER */
        $('.slider').slider()

    </script>
    {#<script type = "text/javascript">#}
    {#$('.reservation').datepicker();#}
    {#$('.reservation').val('');#}
    {#    $(document).ready(function () {#}
    {#        $('.reservation').daterangepicker({#}
    {#            "defaultDate": "",#}
    {#            "forceParse": 0,#}
    {#            "showDropdowns": true,#}
    {#            "showISOWeekNumbers": true,#}
    {#            "ranges": {#}
    {#                '今天': [moment(), moment()],#}
    {#                '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],#}
    {#                '近一周': [moment().subtract(6, 'days'), moment().subtract(6, 'days')],#}
    {#                '近一个月': [moment().subtract(29, 'days'), moment()],#}
    {#                '本月': [moment().startOf('month'), moment().endOf('month')],#}
    {#                '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]#}
    {#            },#}
    {#            "locale": {#}
    {#                "format": "MM/DD/YYYY",#}
    {#                "separator": " - ",#}
    {#                "applyLabel": "确定",#}
    {#                "cancelLabel": "取消",#}
    {#                "fromLabel": "从",#}
    {#                "toLabel": "到",#}
    {#                "customRangeLabel": "自定义",#}
    {#                "weekLabel": "周",#}
    {#                "daysOfWeek": [#}
    {#                    "日",#}
    {#                    "一",#}
    {#                    "二",#}
    {#                    "三",#}
    {#                    "四",#}
    {#                    "五",#}
    {#                    "六"#}
    {#                ],#}
    {#                "monthNames": [#}
    {#                    "1月",#}
    {#                    "2月",#}
    {#                    "3月",#}
    {#                    "4月",#}
    {#                    "5月",#}
    {#                    "6月",#}
    {#                    "7月",#}
    {#                    "8月",#}
    {#                    "9月",#}
    {#                    "10月",#}
    {#                    "11月",#}
    {#                    "12月"#}
    {#                ],#}
    {#                "firstDay": 1#}
    {#            },#}
    {#"alwaysShowCalendars": true,#}
    {#"linkedCalendars": false,#}
    {#        }, function (start, end, label) {#}
    {#            console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");#}
    {#        });#}
    {#    });#}
    {#</script>#}
{% endblock jquery_js %}
